<!DOCTYPE html>
<html lang="en">
<head>  


    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id = "light" src="https://www.w3schools.com/w3images/nature.jpg"><br><br>
    <input type="button" value="点亮" onclick="on()">
    <input type="submit" value="熄灭" onclick="off()">
    <br><br>

    <input type="text" id ="name"value="ITCAST" onfocus="lower()" onblur="upper()">

    <br>

    <input type="checkbox" name='hobby'>电影
    <input type="checkbox" name='hobby'>音乐
    <input type="checkbox" name='hobby'>旅游
    <br><br>
    <input type = 'button' value="全选" onclick="selectAll()">
    <input type = 'button' value="全不选" onclick="reverse()">


</body>
<script>
    // onlick--->获取img对象和src属性
    function on(){
        var img = document.getElementById("light");
        img.src = "image.png";
    }
    function off(){
        var img = document.getElementById("light");
        img.src = "https://www.w3schools.com/w3images/nature.jpg";

        
    }
    // 获取对象，转小写
    function lower(){
        var input = document.getElementById("name");
        input.value=input.value.toLowerCase();    
    }
    function upper(){
        var input = document.getElementById("name");
        input.value=input.value.toUpperCase();
    }

function selectAll(){
    var hobby = document.getElementsByName("hobby");
    for(let i=0;i<hobby.length;i++){
        const element = hobby[i];
        element.checked = true;
    }
}
function reverse(){
    var hobby = document.getElementsByName("hobby");
    for(let i=0;i<hobby.length;i++){
        const element = hobby[i];
        element.checked = false;

    }
}
</script>

</html>